<template>
    <a-config-provider :locale="zhCN">
        <a-layout ref="layout">
            <a-layout-header :style="{ position: 'fixed', padding: '0 10px', zIndex: 1, width: '100%' }">
                <img src="@/assets/logo.png" alt="" style="float:left;margin:0 20px 0 0">
                <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="horizontal"
                    :style="{ lineHeight: '64px', width: '400px', float: 'left' }" @click="GotoPath">
                    <a-menu-item :key="item.path" v-for="item in MenuConfiog">{{ item.name }}</a-menu-item>
                </a-menu>
                <User />
            </a-layout-header>
            <a-layout-content ref="ContentLayout" class="ContentLayout">
                <div ref="content" class="content">
                    <router-view></router-view>
                </div>
                <a-layout-footer :style="{ textAlign: 'center' }">
                    代码质量检查 ©2022 Created by DevSpeed
                </a-layout-footer>
            </a-layout-content>
        </a-layout>
    </a-config-provider>
</template>
<script setup lang="ts">
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import User from './_user.vue'

const route = useRoute();
const router = useRouter();

const layout = ref();
const content = ref();
const ContentLayout = ref();


interface NavRouterItem {
    path: string,
    name: string,
}

const MenuConfiog = ref<NavRouterItem[]>([]);
const routers = router.getRoutes();
routers.forEach(ele => {
    if (ele.meta && ele.meta.NavName && ele.path != '/login') {
        MenuConfiog.value.push({
            path: ele.path,
            name: ele.meta.NavName as string,
        });
    }
});
const selectedKeys = ref([MenuConfiog.value[0].path]);

onMounted(() => {
    if (route.fullPath) {
        selectedKeys.value = [route.fullPath];
    };
})


function GotoPath(event: any) {
    router.push(event.key);
}

onMounted(() => {
    layout.value.$el.style.minHeight = document.body.clientHeight + 'px';
    content.value.style.minHeight = document.body.clientHeight - 160 + 'px';
});


</script>

<style scoped>
.ContentLayout {
    margin-top: 64px;
    padding: 24px 24px 0 24px;
    height: calc(100vh - 64px);
    overflow: auto;
}

.content {
    background: #fff;
    min-height: 775px;
    min-width: 1280px;
    padding: 0 20px;
}
</style>